<template>
  <div class="main-chartTwo txt_btm" :id="id">
    main-chartTwo
  </div>
</template>

<script>
import jsonData1 from '@/assets/config/ZY_JSLINE.json'
import jsonData2 from '@/assets/config/ZY_RLLINE.json'
import jsonData3 from '@/assets/config/ZY_WSLINE.json'
import jsonData4 from '@/assets/config/ZY_YSLINE.json'
import * as echarts from "echarts";

let dataArray = [jsonData1, jsonData2, jsonData3, jsonData4]


export default {
  name: "chartTwo",
  components: {},
  props: ['id'],
  data() {
    return {};
  },
  mounted() {
    let newData1 = []
    let newData2 = []
    let newData3 = []
    let newData4 = []

    dataArray.forEach((data, index) => {
      // console.log(`请求${index + 1}的数据:`, data.features);
      if (index === 0) {
        newData1 = data.features
      } else if (index === 1) {
        newData2 = data.features
      } else if (index === 2) {
        newData3 = data.features
      } else if (index === 3) {
        newData4 = data.features
      }
    });


    let newData1_1 = []
    let newData2_2 = []
    let newData3_3 = []
    let newData4_4 = []
    // 索引
    let newData5_5 = []

    // 计算每个数组的长度
    const lengths = [
      newData1.length,
      newData2.length,
      newData3.length,
      newData4.length
    ];


    // 找出最长的数组的索引
    const maxIndex = lengths.indexOf(Math.max(...lengths));
    // 根据最长的数组索引，选择对应的数组进行操作
    const longestArray = [newData1, newData2, newData3, newData4][maxIndex];
    // 遍历最长的数组，并将 index + 1 推入 newData5_5
    longestArray.forEach((item, index) => {
      newData5_5.push(index + 1);
    });


    newData1.forEach(item => { newData1_1.push(item.properties.SHAPE_Leng) })
    newData2.forEach(item => { newData2_2.push(item.properties.SHAPE_Leng) })
    newData3.forEach(item => { newData3_3.push(item.properties.SHAPE_Leng) })
    newData4.forEach(item => { newData4_4.push(item.properties.SHAPE_Leng) })


    newData1_1.push(newData1)
    newData2_2.push(newData2)
    newData3_3.push(newData3)
    newData4_4.push(newData4)


    // 假设的数据集
    // let newData1_1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    // let newData2_2 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    // let newData3_3 = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
    // let newData4_4 = [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000];

    // 获取最长数组的长度以确保所有数据都被处理
    const maxLength = Math.max(newData1_1.length, newData2_2.length, newData3_3.length, newData4_4.length);

    // 初始化结果数组
    let combinedData = [];

    // 遍历最长数组的长度
    for (let i = 0; i < maxLength; i++) {
      // 对应索引位置的数据相加
      combinedData[i] = (newData1_1[i] || 0) + (newData2_2[i] || 0) + (newData3_3[i] || 0) + (newData4_4[i] || 0);
    }

    // 创建新的 series 对象
    let newSeries = [{
      name: '综合数据',
      symbol: 'none', // 隐藏折点
      type: 'line',
      lineStyle: {
        color: '#ded183' // 设置折线颜色为红色
      },
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      label: {
        show: false,
        position: 'top',
        color: 'white'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, // 渐变方向从上到下
            [
              { offset: 0, color: 'rgba(255, 210, 81,0.9)' },
              { offset: 1, color: 'rgba(255, 210, 81,0.5)' }
            ]
        )
      },
      data: combinedData
    }];
    // console.log(newSeries); // 输出结果

    // let newSeries = []
    // newSeries.push({
    //     name: '供水',
    //     type: 'line',
    //     smooth: true,
    //     emphasis: {
    //         focus: 'series'
    //     },
    //     label: {
    //         show: false,
    //         position: 'top',
    //         color: 'white' // 设置折点标签文字颜色为白色
    //     },
    //     data: newData1_1
    // })
    // newSeries.push({
    //     name: '热力',
    //     type: 'line',
    //     smooth: true,
    //     emphasis: {
    //         focus: 'series'
    //     },
    //     label: {
    //         show: false,
    //         position: 'top',
    //         color: 'white' // 设置折点标签文字颜色为白色
    //     },
    //     data: newData2_2
    // })
    // newSeries.push({
    //     name: '污水',
    //     type: 'line',
    //     smooth: true,
    //     emphasis: {
    //         focus: 'series'
    //     },
    //     label: {
    //         show: false,
    //         position: 'top',
    //         color: 'white' // 设置折点标签文字颜色为白色
    //     },
    //     data: newData3_3
    // })
    // newSeries.push({
    //     name: '雨水',
    //     type: 'line',
    //     smooth: true,
    //     emphasis: {
    //         focus: 'series'
    //     },
    //     label: {
    //         show: false,
    //         position: 'top',
    //         color: 'white' // 设置折点标签文字颜色为白色
    //     },
    //     data: newData4_4
    // })

    // 初始化ECharts实例
    var myChart = echarts.init(document.querySelector("#echarts_2"));
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#ffd251',
            color: 'white' // 设置轴指针标签文字颜色为白色
          }
        },
        textStyle: {
          color: 'white' // 设置提示框文字颜色为白色
        }
      },
      // legend: {
      //     data: ['供水', '热力', '污水', '雨水'],
      //     textStyle: {
      //         color: 'white' // 设置图例文字颜色为白色
      //     },
      //     icon: 'circle',
      //     top: 0 // 将图例放置在图表的下方
      // },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: newData5_5,
          axisLabel: {
            show: false,
            color: 'white' // 设置 X 轴标签文字颜色为白色
          },
          axisLine: {
            lineStyle: {
              color: 'white' // 设置 X 轴线颜色为白色
            }
          },
          axisTick: {
            lineStyle: {
              color: 'white' // 设置 X 轴刻度线颜色为白色
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            color: 'white' // 设置 Y 轴标签文字颜色为白色
          },
          axisLine: {
            show: false // 隐藏 Y 轴线
          },
          axisTick: {
            show: false // 隐藏 Y 轴刻度线
          },
          splitLine: {
            show: true, // 显示 Y 轴分割线
            // lineStyle: {
            //     type: 'dotted', // 设置分割线为点线
            //     color: 'rgba(255, 255, 255, 0.5)' // 设置分割线颜色为半透明白色
            // }
          }
          // splitLine: {
          //   show: false // 隐藏 Y 轴分割线
          // }
        }
      ],
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 5,
          textStyle: {
            color: 'white'
          }
        },
        {
          start: 0,
          end: 5,
          textStyle: {
            color: 'white'
          }
        }
      ],
      series: newSeries,
    };
    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
    // 监听窗口大小变化，以调整图表大小
    window.addEventListener("resize", function () {
      myChart.resize();
    });


  },
  methods: {},
  watch: {},
  computed: {},
  beforeDestroy() {

  },
}
</script>

<style scoped>
.main-chartTwo {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>
